<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    
    <style>
      .touxiang{
        width: 50px; /* 或者你想要的大小 */
        height: 50px; /* 和宽度相同 */
        border-radius: 50%; /* 创建圆形 */
      }
      .col-md-3 a img{
        transition: transform 0.3s
        
      }
      .col-md-3 a img:hover{
        transform: scale(1.2);
      }
      a{
        text-decoration: none;
      }
      a:hover{
        text-decoration: none;
      }
      body{
        background-image: url(images/body-bg.png);
      }
      nav{
        background-image: url(images/nav-bg.png);
        color: white;
      }
      .jihuo{
        display: block;
      }
      .ping{
        display: flex;;align-items: center;margin-bottom: 10px;
      }
      .white{
        color: white;
        width: 200px;
      }
      .liuImg{
        width: 50px;height: 50px;
      }
      .remove{
        font-size: 10px;
        color: white;
        margin-left: 450px;
        text-decoration: none;
      }
    </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="navbar-brand ">
      <a href="#" class="div1" style="text-decoration: none; color: black;">
      <img src="images/tou1.jpg" alt="" class="touxiang">
      <span id="userName"style="color: white;"></span>
    </a>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="index.html"style="color: white;">首页<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="game.html"style="color: white;">游戏</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="community.html"style="color: white;">社区</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="More.html"style="color: white;">更多游戏</a>
        </li>
        <li class="nav-item">
            <a class="nav-link"style="color: white;"href="login.html">登录/注册</a>
          </li>
          <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle xiaLa" type="button" data-toggle="dropdown" aria-expanded="false">
              帮助
            </button>
            <div class="dropdown-menu bg-light" >
              <a class="dropdown-item" href="#">客服</a>
              <a class="dropdown-item" href="#">用户协议</a>
              <a class="dropdown-item" href="#">隐私政策</a>
            </div>
          </div>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
      </form>
    </div>
  </nav>
      <div class="container">
        <div style="display: flex; background-image: url(images/header-bg.png);">
            <img src="images/tou1.jpg" style="width: 140px;height: 160px;" id="userImg">
            <div style="display: flex; flex-flow: column;margin: 10px 0px 10px 10px;flex: 9;">
                <h5 style="margin-bottom: 50px;color: white;" id="GameName"></h5>
                <span style="font-size: 10px;color: white;"id="type">未提供任何信息</span>
            </div>
            <div style="flex: 3;">
                <span style="border-radius: 50% ;border: 1px solid #ccc;color: white;">6级</span>
                <p style="margin: 15px 0px;color: white;">你可以在这里展示你的游戏徽章。请从<a href="#">编辑个人资料中选择</a> </p>
                <button class="" style="outline: none;border: none;color: white; background-image: url(images/game-bg.png);">编辑个人资料</button>
            </div>
        </div>
        
        <div style="display: flex;">
            <ul style="flex: 8; background-image: url(images/game-bg.png);" id="p">
                <h4 style="color: white;">最近动态</h4>
              <a href="#" >
                <li class="bg" style="display: flex;;align-items: center;margin-bottom: 10px;"id="game">
                    <img src="images/lunbo3.jpg" alt="" style="width: 120px;height: 80px; flex: 1;" >
                    <div style="display: flex; flex-flow: column;margin: 10px 0px 10px 10px;flex: 9;">
                      <h5 style="flex: 9;margin-bottom: 50px;" id="GameName">星露谷物语</h5>
                    </div>
                    <div style="flex: 1; display: flex;flex-flow: column;">
                      <span style="font-size: 8px;margin-top: 58px;">总时数3.6小时</span>
                      <p style="font-size: 9px;">最后运日期2024-5-19</p>
                    </div>
                </li>
              </a>
              <a href="#" >
                <li class="bg" style="display: flex;;align-items: center;margin-bottom: 10px;"id="game">
                    <img src="images/g2.png" alt="" style="width: 120px;height: 80px; flex: 1;" >
                    <div style="display: flex; flex-flow: column;margin: 10px 0px 10px 10px;flex: 9;">
                      <h5 style="flex: 9;margin-bottom: 50px;" id="GameName">地平线4</h5>
                    </div>
                    <div style="flex: 1; display: flex;flex-flow: column;">
                      <span style="font-size: 8px;margin-top: 58px;">总时数3.6小时</span>
                      <p style="font-size: 9px;">最后运日期2024-5-19</p>
                    </div>
                </li>
              </a>
              <a href="#" >
                <li class="bg" style="display: flex;;align-items: center;margin-bottom: 10px;"id="game">
                    <img src="images/g1.png" alt="" style="width: 120px;height: 80px; flex: 1;" >
                    <div style="display: flex; flex-flow: column;margin: 10px 0px 10px 10px;flex: 9;">
                      <h5 style="flex: 9;margin-bottom: 50px;" id="GameName">上古卷轴</h5>
                    </div>
                    <div style="flex: 1; display: flex;flex-flow: column;">
                      <span style="font-size: 8px;margin-top: 58px;">总时数3.6小时</span>
                      <p style="font-size: 9px;">最后运日期2024-5-19</p>
                    </div>
                </li>
              </a>
              <h4 style="color: white;">留言</h4>
              <li class="bg ping" id="game">
                <img src="images/tou1.jpg" class="liuImg">
                <input type="text" placeholder="请添加一条留言" style="height: 46px;width: 650px;" id="inputv">
                <button style="outline: none;border: none;height: 46px;width: 50px;" id="faBiao">发表</button>
                </li>
                <li class="bg ping" id="game">
                  <img src="images/tou1.jpg" class="liuImg">
                  <div class="white">
                    <span>501518160</span>
                    <br>
                    <span >你好</span>
                  </div>
                  <a class="remove">删除</a>
                </li>
                
            </ul>
            <div style="flex: 4;background-image: url(images/friend-bg.png);" class="bg" id="yulan" >
              <h4 style="margin-top: 10px;margin-left: 5px;color: white;"id="yGameName">当前在线</h4>
              <h5 style="margin-left: 20px;color: white;">徽章</h5>
              <img src="images/h1.png" style="margin-left: 30px;width: 50px;height: 50px;">
              <img src="images/h2.png" style="width: 50px;height: 50px;" >
              <img src="images/h3.png" style="width: 50px;height: 50px;">
              <img src="images/h4.png" style="width: 50px;height: 50px;">
              <br>
              <a href="#"><h5 style="margin-left: 20px; color: white;">游戏</h5></a>
              <a href="#"><h5 style="margin-left: 20px;color: white;">库存</h5></a>
              <a href="#"><h5 style="margin-left: 20px;color: white;">截图</h5></a>
              <a href="#"><h5 style="margin-left: 20px;color: white;">评测</h5></a>
              <a href="#"><h5 style="margin-left: 20px;color: white;">指南</h5></a>
              <a href="#"><h5 style="margin-left: 20px;color: white;">艺术作品</h5></a>
              <a href="#"><h5 style="margin-left: 20px;color: white;">创意工坊</h5></a>
              <h5 style="margin-left: 20px;color: white;">好友</h5>
                <ul>
                    <li style="display: flex;">
                        <img src="images/0.jpg" style="width: 40px;height: 40px;"><p style="font-size: 12px;color: white;">凤歧意难平<br>上次在线30天前</p>
                    </li>
                    <li style="display: flex;">
                        <img src="images/1.jpg" style="width: 40px;height: 40px;"><p style="font-size: 12px;color: white;">凤歧意难平<br>上次在线30天前</p>
                    </li>
                    <li style="display: flex;">
                        <img src="images/2.jpg" style="width: 40px;height: 40px;"><p style="font-size: 12px;color: white;">凤歧意难平<br>上次在线30天前</p>
                    </li>
                    <li style="display: flex;">
                        <img src="images/3.jpg" style="width: 40px;height: 40px;"><p style="font-size: 12px;color: white;">凤歧意难平<br>上次在线30天前</p>
                    </li>

                </ul>
            </div>
        </div>
      </div>
      <!-- <script src="js/jsCode.js"></script> -->
    <script src="js/base.js"></script>
    <script>
      var userNameV =  document.getElementById("GameName")
      userNameV.innerHTML = localStorage.getItem("username")
      // 获取发表按钮
      var btn = document.getElementById("faBiao")
      // 添加监听事件
      btn.addEventListener("click",function(){
      // 创建用户img，span，div，br，p,li
      var img = document.createElement("img")
      var span1 = document.createElement("span")
      var span2 = document.createElement("span")
      var div = document.createElement("div")
      var br = document.createElement("br")
      var a = document.createElement("a")
      var li  = document.createElement("li")
      // 获取input的值
      var inputV = document.getElementById("inputv").value
      // 获取用户头像
      var userImg = document.getElementById("userImg").getAttribute("src")
      // 给创建的标签添加属性
      img.setAttribute("class","liuImg")
      img.setAttribute("src",userImg)
      span1.innerHTML=userNameV.innerHTML
      span2.innerHTML=inputV
      div.setAttribute("class","white")
      a.setAttribute("class","remove")
      a.innerHTML="删除"
      li.setAttribute("class","ping")
      // 把img，span，div，br，p都拼接到li中
      div.appendChild(span1)
      div.appendChild(br)
      div.appendChild(span2)
      li.appendChild(img)
      li.appendChild(div)
      li.appendChild(a)
      // 获取删除按钮
      btn.parentElement.parentElement.appendChild(li)
      var btns = document.querySelectorAll(".remove")
      btns.forEach((i,index)=>{
        i.addEventListener("click",function(){
          i.parentElement.parentElement.removeChild(i.parentElement)
        })
      })
      document.getElementById("inputv").value=""
      })
      

      
    </script>
</body>
</html>
<!-- <li class="bg ping" id="game">
      <img src="images/tou1.jpg" class="liuImg">
      <div class="white">
        <span>501518160</span>
        <br>
        <span id="lun">nihao</span>
      </div>
      <p class="remove">删除</p>
    </li> -->